import React, { memo } from 'react'
import { Menu, Layout } from 'antd'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import '../../assets/styles/components/home/sider.scss'

const {Sider} = Layout
const {SubMenu} = Menu

const SiderUI = (props) => {
  const {curSelect, onOpenChange, openKey, routers, handleLevel1Click} = props
  console.log('sider render')
  return (
    <Sider theme="light" collapsible className="sider">
      <Menu
        selectedKeys={[curSelect]}
        mode="inline"
        onOpenChange={onOpenChange}
        openKeys={[openKey]}
      >
        {
          routers.map((router) => router.path &&  (
            router.children && router.children.length ? (
              <SubMenu key={router.path} title={router.title}>
                {
                  router.children.map(child => (
                    <Menu.Item key={child.path}>
                      <Link to={child.path}>{child.title}</Link>
                    </Menu.Item>
                  ))
                }
              </SubMenu>
            ) : (
              <Menu.Item key={router.path} onClick={handleLevel1Click}>
                <Link to={router.path}>{router.title}</Link>
              </Menu.Item>
            )
          ))
        }
      </Menu>
    </Sider>
  )
}

SiderUI.propTypes = {
  curSelect: PropTypes.string,
  onOpenChange: PropTypes.func,
  openKey: PropTypes.string,
  routers: PropTypes.array,
  handleLevel1Click: PropTypes.func
}

SiderUI.defaultProps = {
  onOpenChange: () => {},
  handleLevel1Click: () => {}
}

export default memo(SiderUI)